<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新建模型</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="list">
        <el-table-column label="模型标题" align="center" prop="title" />
        <el-table-column label="模型名称" align="center" prop="name" />
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="启用状态" align="center" prop="status">
          <template slot-scope="scope">
            {{ scope.row.status == 0 ? '未启用' : '已启动' }}
          </template>
        </el-table-column>
        <el-table-column label="模型字段" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="success" icon="el-icon-paperclip"
              @click="handleFieldEdit(scope.row)">字段管理</el-button>
          </template>
        </el-table-column>
        <el-table-column label="语音识别" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" icon="el-icon-s-operation"
              @click="handleRadioTpl(scope.row)">语音识别模板设置</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleSetStatus(scope.row)"
              v-if="scope.row.status == 0">启用</el-button>
            <el-button size="mini" type="text" @click="showAsrTpl(scope.row)"
              v-if="scope.row.asrFields != null && scope.row.asrFields != ''">语音识别模板</el-button>
            <el-button size="mini" type="text" @click="handleCopy(scope.row)">复制</el-button>
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" />
    <model-edit ref="modelEdit" @handleOk="getList" />
    <radio-tpl-edit ref="radioTplEdit" @handleOk="getList" />
  </div>
</template>

<script>
import * as Msg from "@/api/guard/message.js";
import ModelEdit from "./components/ModelEdit.vue";
import { listModels, enableModel } from '@/api/system/eventModel';
import RadioTplEdit from "./components/RadioTplEdit.vue";

export default {
  name: 'EventList',
  components: { ModelEdit, RadioTplEdit },
  data() {
    return {
      list: [],
      // 分页
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
    };
  },
  created() { },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      listModels(this.queryParams).then((res) => {
        this.list = res.rows;
        this.total = res.total;
      });
    },
    handleAdd() {
      this.$refs.modelEdit.add();
    },
    handleEdit(row) {
      this.$refs.modelEdit.edit(row);
    },
    handleSetStatus(row) {
      enableModel({ id: row.id, status: 1 }).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess('模型启用成功');
          this.getList();
        } else {
          this.$modal.msgError('模型启用失败');
        }
      })
    },
    handleCopy() {

    },
    handleDelete() {

    },
    handleFieldEdit(row) {
      this.$tab.openPage("模型字段管理", '/system/eventModel/fields', { modelId: row.id });
    },
    handleRadioTpl(row) {
      this.$refs.radioTplEdit.showDialog(row.id, JSON.parse(row.asrFields));
    },
    showAsrTpl(row) {
      let content = [];
      let asrTpl = JSON.parse(row.asrFields)
      asrTpl.forEach(r => {
        content.push(`${r.asr_tag}<span style="color: #009dfa">【${r.tips_char}】</span>`);
      });
      this.$alert(content.join('，') + '。', '语音识别模板', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        callback: action => {

        }
      });
    }
  },
};
</script>

<style scoped lang="scss"></style>
